<template>
	<view class="main_box">
		<view class="fix_title">
			8/8绑定用户
		</view>
		<view class="txt">
			请给电子钱包绑定一名用户
		</view>
		<template v-if="stuList.length>0">
			<view class="card" v-for="(item,index) in stuList" :id="'demo'+(index+1)" :key="index">
				<template v-if="item.studentCards">
					<template v-if="item.studentCards.length>0">
						<view class="cardName">
							{{item.studentCards[0].orgName}}
						</view>
						<view class="end">
							<view class="left">
								<view class="tp">
									<text>姓名：</text>
									<text>{{item.studentCards[0].empName}}</text>
								</view>
							</view>
							<view v-if="item.flag" class="right" @click="bindStudent(item.studentCards[0])">
								立即绑定
							</view>
							<view v-if="!item.flag" class="right">
								已绑定
							</view>
						</view>
					</template>
				</template>
			</view>
		</template>
		<view class="add">
			<view class="ans">
				添加用户
			</view>
			<view class="btns" @click="addStudent">
				立即添加
			</view>
		</view>
		<view class="shuTip">
			绑定后，用户可在校食堂、超市等指定区域消费
		</view>
		<view class="btn" @click="toNext">
			完成
		</view>
		<view class="kdn">
			<image src="/static/images/blank/4341yu.png" mode=""></image>
			<view class="subx">
				交通银行 提供产品服务
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPhoneCode,
		getTwoUserList,
		getMoneny,
		bindTwoEmpStu,
		TwoUserBinded,
		TwoUserBindStuList
	} from '../../common/api/blank.js';
	import {
		queryOrg,
		findBaseArea,
		queryMilkCardBalance,
		queryStudentCard,
		queryStudentCardBalance,
		selectCardInfoByIdCardNo,
		openStudentMike
	} from '../../common/api/index.js'
	import {
		_showLoading,
		_showToast
	} from '../../common/js/util.js';
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				stuList: [],
				id: "",
				flag: false,
				mobileNo: "",
				certNo: "",
				accountNo: "",
				accountName: "",
				batId: "",
				orgId: "",
				off: true,
				tanOff: false,
				msgType: 'success',
				isFrist: 1
			}
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false
			}
			this.back();
			return true
		},
		onLoad(option) {
			this.orgId = option.orgId
			this.batId = option.batId
			this.mobileNo = option.phone
			// if(option.toDownload == 1 && this.orgId == 4514061){
			// 	uni.navigateTo({
			// 		url: '/pageBlank/blankAppDownLoadH5/blankAppDownLoadH5'
			// 	})
			// }
		},
		async onShow() {

			var s_userId = uni.getStorageSync("s_userId")
			uni.showLoading({
				title: "获取用户列表中"
			})
			if (s_userId) {
				try {
					const res = await queryStudentCard({
						userId: s_userId
					})
					console.log(res)
					if (res.code == 0) {

						uni.hideLoading()
						try {
							const result = await TwoUserBindStuList({
								batId: this.batId
							})
							console.log(result)
							if (result.code == 0) {
								if (result.data.length > 0) {
									let arr = []
									res.data.forEach(item => {
										item.flag = true
									})
									result.data.forEach(items => {
										res.data.forEach(obj => {
											if ((obj.studentCards[0].empId == items.empId) && (obj
													.studentCards[0].orgId == items.orgId)) {
												obj.flag = false
											}
										})
									})
									this.stuList = res.data

								} else {
									res.data.forEach(item => {
										item.flag = true
									})
									this.stuList = res.data
									console.log(this.stuList)
								}
							} else {
								_showToast(result.msg)
								res.data.forEach(item => {
									item.flag = true
								})
								this.stuList = res.data
							}
						} catch (err) {
							this.stuList = []
							_showToast(err)
						}

					} else {
						uni.hideLoading()
						this.stuList = []
						_showToast(res.msg)
					}
				} catch (err) {
					uni.hideLoading()
					this.stuList = []
					_showToast(err)
				}

			} else {
				this.stuList = []
				_showToast('用户id为空')
			}

		},
		components: {

		},
		methods: {
			addStudent() {
				uni.navigateTo({
					url: `/packageCard/card/bind?blank=true&orgId=${this.orgId}&isBlank=true&batId=${this.batId}&only=true`
				});
			},
			back() {
				var pages = getCurrentPages();
				uni.navigateBack()
			},
			async bindStudent(val) {
				if (this.off) {
					this.off = false
					uni.showLoading({
						title: "绑定中"
					})
					try {
						const res = await TwoUserBinded({
							"batId": this.batId,
							"orgId": val.orgId,
							"empId": val.empId,
							"empName": val.empName
						})
						if (res.code == 0) {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: "绑定成功"
							})
							setTimeout(async() => {
								this.off = true
								this.flag = true
								// if (val.orgId == 4514061) { //是不是广西理工
								// 	//还要判断首充
								// 	const bindres = await getTwoUserList({
								// 		userId: uni.getStorageSync("s_userId"),
								// 		orgId: this.orgId
								// 	})
								// 	if (bindres.code == 0) {
								// 		if (bindres.data.length > 0) {
								// 			this.isFrist = bindres.data[0].initialTopup
								// 		}
								// 	}
								// 	if (this.isFrist == 0) {
								// 		uni.navigateTo({
								// 			url: `/pageMassage/redPacketRecharge/redPacketRecharge?batId=${this.batId}&orgId=${val.orgId}&phone=${this.mobileNo}`
								// 		})
								// 	} else {
								// 		var pages = getCurrentPages()
								// 		uni.navigateBack({
								// 			delta: pages.length - 2
								// 		})
								// 	}

								// } else {
								// 	var pages = getCurrentPages()
								// 	uni.navigateBack({
								// 		delta: pages.length - 2
								// 	})
								// }
								var pages = getCurrentPages()
								uni.navigateBack({
									delta: pages.length - 2
								})

							}, 1000)

						} else {
							console.log("这里")
							this.off = true
							uni.hideLoading()
							_showToast(res.msg)
						}
					} catch (err) {
						this.off = true
						uni.hideLoading()
						_showToast(err)
					}

				}

			},
			//下一步
			toNext() {
				if (this.stuList.some(item => item.flag == false)) {
					var pages = getCurrentPages()
					uni.navigateBack({
						delta: pages.length - 2
					})
				} else {
					_showToast("请绑定用户")
				}
				console.log(this.flag)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main_box {
		padding: 24upx;
		box-sizing: border-box;
		overflow-y: auto;

		.scroll-Y {
			// height: 600rpx;
			max-height: 400rpx;
			height: auto;
			background-color: green;
		}

		.kdn {
			margin: 86rpx 0rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			>image {
				width: 34rpx;
				height: 33rpx;
			}

			.subx {
				margin-left: 8rpx;
				height: 34rpx;
				font-size: 23rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #003A79;
				line-height: 34rpx;
			}
		}

		.add {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			margin-top: 50rpx;
			width: 690rpx;
			height: 102rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 26rpx 1rpx rgba(0, 0, 0, 0.06);
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			opacity: 1;

			.ans {
				height: 46rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #40424E;
				line-height: 46rpx;
				margin-left: 32rpx;
			}

			.btns {
				width: 154rpx;
				height: 54rpx;
				line-height: 54rpx;
				text-align: center;
				background: #2D57F6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				font-size: 24rpx;
				font-family: Source Han Sans CN-Light, Source Han Sans CN;
				font-weight: 300;
				color: #FFFFFF;
				margin-right: 34rpx;
			}
		}

		.card {
			width: 690rpx;
			height: 234rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 26rpx 1rpx rgba(0, 0, 0, 0.06);
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			opacity: 1;
			margin: 0 auto;
			box-sizing: border-box;
			padding-top: 28rpx;
			padding-left: 32rpx;
			margin-bottom: 32rpx;

			.cardName {
				height: 46rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #40424E;
				line-height: 46rpx;
				margin-bottom: 32rpx;
			}

			.end {
				display: flex;
				justify-content: space-between;

				.right {
					width: 154rpx;
					height: 54rpx;
					line-height: 54rpx;
					text-align: center;
					background: #2D57F6;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					opacity: 1;
					font-size: 24rpx;
					font-family: Source Han Sans CN-Light, Source Han Sans CN;
					font-weight: 300;
					color: #FFFFFF;
					margin: auto 0;
					margin-right: 34rpx;
				}

				.left {
					.tp {
						display: flex;
						height: 40rpx;
						margin-bottom: 11rpx;

						text {
							height: 40rpx;
							font-size: 28rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #6E7077;
							line-height: 40rpx;
						}
					}

				}
			}
		}

		.shuTip {
			font-size: 26rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			box-sizing: border-box;
			padding-left: 12rpx;
			margin-top: 48rpx;
		}

		.btn {
			width: 358rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #3478F5;
			box-shadow: 0rpx 3rpx 26rpx 1rpx rgba(55, 98, 244, 0.58);
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			opacity: 1;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Light, Source Han Sans CN;
			font-weight: 300;
			color: #FFFFFF;
			margin: 0 auto;
			margin-top: 227rpx;
			// position: fixed;
			// bottom: 225rpx;
			// left: calc(50% - 179rpx);
		}

		.fix_title {
			margin: 30upx 0 60upx 0;
			font-size: 40upx;
			font-weight: bolder;
			display: flex;
			align-items: center;
			margin-left: 10rpx;

			&::before {
				content: '';
				height: 36upx;
				width: 12upx;
				background-image: linear-gradient(to bottom, #c3defc, #007AFF);
				margin-right: 12upx;
				border-radius: 6upx;
			}
		}

		.txt {
			height: 46rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #020202;
			line-height: 46rpx;
			margin-bottom: 68rpx;
			margin-left: 32rpx;
			margin-top: 56rpx;

		}
	}
</style>